<template>
    <el-dialog
            title="创建文件夹"
            :visible.sync="show"
            width="45%"
    >
        <el-form
                :model="mkdirInfo"
                label-width="90px"
                ref="form"
                v-if="freshKey"
                class="form"
                :rules="rule"
                v-loading="loadState"
                @submit.native.prevent
                @keyup.enter.native="sure"
        >
            <el-form-item label="文件夹名称" prop="name">
                <el-input v-model="mkdirInfo.name" placeholder="输入文件夹的名字"></el-input>
            </el-form-item>
            <el-form-item label="文件夹简介" prop="description">
                <el-input type="textarea" v-model="mkdirInfo.description" placeholder="可以在此填入简介，描述文件夹的作用，便于日后识别。"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button type="primary" @click="sure">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "MakeDir",
        props:{
            makeDirectoryUrl:{
                type:String,
                default:"/file/mkdir"
            },
        },
        data(){
            return{
                mkdirInfo:{
                    name: "",
                    description:"",
                },
                show: false,
                currentDir: null,
                rule:{
                    name:[{required:true,message:"请输入文件夹名",trigger: "blur"}]
                },
                loadState:false,
                freshKey:true,
            };
        },
        methods:{
            cancel(){
                this.show = false;
            },
            sure(){
                this.$refs.form.validate((valid)=>{
                    if(valid){
                        this.submit();
                    }else{
                        this.$message({
                            showClose: true,
                            message: "请填写文件夹名",
                            type: "error"
                        });
                    }
                });
            },
            async submit(){
                this.loadState = true;
                try {
                    if(!this.mkdirInfo.description) this.mkdirInfo.description="";
                    await this.mkdir(this.currentDir,this.mkdirInfo.name,this.mkdirInfo.description);
                    this.$message({
                        type: 'success',
                        message: '文件夹创建成功!'
                    });
                    this.mkdirInfo.name = "";
                    this.mkdirInfo.description = "";
                    this.$emit("mkdir-success",this.currentDir);
                }catch (e) {
                    this.$alert(e.message, this.mkdirInfo.name+' 创建失败!', {type:"error"});
                }finally {
                    this.loadState = false;
                    this.show = false;
                }
            },
            async mkdir(targetDir,name,description){
                const formData = new FormData();
                formData.append("parentId",targetDir.id);
                formData.append("name",name);
                formData.append("description",description);
                try {
                    await this.$http.post(this.makeDirectoryUrl,formData);
                }catch (e) {
                    console.log(e);
                    let err = e;
                    if(err.response&&err.response.hasOwnProperty("data"))err = err.response.data;
                    throw e;
                }
                return null;
            },
            open(dir){
                if(!dir){
                    this.$message({
                        showClose: true,
                        message: "请稍等，文件夹未加载完成。如果长时间未响应，您可以尝试刷新浏览器。",
                        type: "error"
                    });
                    return undefined;
                }
                this.currentDir = dir;
                this.freshKey=false;
                this.$nextTick(()=>this.freshKey = true);
                this.show = true;
            }
        },
        mounted() {
            this.$on("open",this.open);
        }
    }
</script>

<style scoped>
.form{
    width: 90%;
    margin: 0 auto;
}
</style>